<template>
  <div class="commonTableSty">
    <s-table
      ref="table"
      class="h100"
      :columns="columns"
      :data="loadData"
      :scrollX="900"
      rowKey="id"
      size="default" >
      <template slot="curVehicleVersion" slot-scope="text">
        <table-ellipsis :text="text"></table-ellipsis>
      </template>
      <template slot="initVehicleVersion" slot-scope="text">
        <table-ellipsis :text="text"></table-ellipsis>
      </template>
      <template slot="campaignName" slot-scope="text,record">
        <div class="withTextAndTagTd">
          <div class="tdText">
            <table-ellipsis :text="text +(record.taskType === 10 ? '[' + $t('cycleTestTask') + ']':'') || '-'">
            </table-ellipsis>
          </div>
<!--          <lock-risk-jump-->
<!--            :config="{-->
<!--              lockFlag:0,-->
<!--              compatibleRisk:record.compatibleRisk,-->
<!--              taskJump:record.taskJump,-->
<!--              query:{taskId: record.taskId,vehicleId:record.vehicleId }-->
<!--            }">-->
<!--          </lock-risk-jump>-->
        </div>
      </template>
      <template slot="taskTargetVehicleVersion" slot-scope="text">
        <table-ellipsis :text="text || '-'"></table-ellipsis>
      </template>
      <template slot="updateType" slot-scope="text">
        <table-ellipsis :text="otaUpdateTypeDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template slot="updateResult" slot-scope="text">
        <table-ellipsis :text="taskVehicleStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template slot="stateReportTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
      </template>
      <template slot="action" slot-scope="text, record">
        <auth-button
              type="primary"
              :ghost="true"
              size="small"
              @click="handleUpdateEvt(record.taskId,record.vin)"
              :auth="statisticsPerms.monitor.view"
              >{{ $t('upgradeInformation') }}</auth-button>
      </template>
    </s-table>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import taskApi from '@/api/modules/task'
import { STable } from '@/components'
import LockRiskJump from '@/views/components/CustomTag/lockRiskJump.vue'
import AuthText from '@/components/AuthText'
import { statisticsPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'


export default {
  components: {
    TableEllipsis,
    STable,
    LockRiskJump,
    AuthText,
    AuthButton
  },
  props: {
    time: {
      type: Number,
      default: 3571592
    },
    vehicleId: {
      type: String,
      default: ''
    },
    activeKey: {
      type: String,
      default: ''
    }
  },
  computed: {
    taskVehicleStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskVehicleStatusDictCode')
    },
    otaUpdateTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('otaUpdateTypeDictCode')
    }
  },
  data () {
    const columns = [
      {
        title: this.$t('campaignName'),
        dataIndex: 'taskName',
        scopedSlots: { customRender: 'campaignName' },
        width: 200
      },
      {
        title: this.$t('updateType'),
        dataIndex: 'updateType',
        scopedSlots: { customRender: 'updateType' },
        width: 150
      },
      {
        title: this.$t('taskTargetVehicleVersion'),
        dataIndex: 'vehicleVersion',
        scopedSlots: { customRender: 'taskTargetVehicleVersion' },
        width: 200
      },
      {
        title: this.$t('车辆升级结果'),
        dataIndex: 'status',
        scopedSlots: { customRender: 'updateResult' },
        width: 150
      },
      {
        title: this.$t('stateReportTime'),
        dataIndex: 'updateTime',
        scopedSlots: { customRender: 'stateReportTime' },
        width: 200,
        sorter: true
      },
      {
        title: this.$t('operation'),
        dataIndex: 'operation',
        scopedSlots: { customRender: 'action' },
        width: 120,
        fixed: 'right'
      }
    ]
    return {
      columns,
      tbData: [],
      loadingData: false,
      statisticsPerms
    }
  },
  watch: {
    time: {
      handler () {
        this.refreshData()
      },
      immediate: true
    },
    activeKey: {
      handler (val) {
        if (val === 'FotaHistoryList') {
          this.refreshData()
        }
      }
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    // 获取当前车辆零件信息
    getOneVehicleVersionList () {
      this.tbData = []
      this.loadingData = true
      if (!this.vehicleId) {
        return
      }
      taskApi.getTaskVehiclePageData({ vehicleId: this.vehicleId }).then(res => {
        this.tbData = res.data.map(item => {
          return {
            id: item.id,
            taskName: item.taskName,
            vehicleVersion: item.vehicleVersion,
            status: item.status,
            updateTime: item.updateTime
          }
        })
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.loadingData = false
      })
    },
    loadData (parameter) {
      if (!this.vehicleId) {
        return new Promise((resolve) => {
          resolve({
            code: 0,
            message: '',
            data: [],
            totalCount: 0,
            totalPage: 0
          })
        })
      }
      return taskApi.getTaskVehiclePageData({ vehicleId: this.vehicleId, ...parameter })
    },
    refreshData (isToFirstPage = true) {
      if (!this.$refs.table) {
        return
      }
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    getPageDictData () {
      ['getTaskVehicleStatusDictCodeData', 'getOtaUpdateTypeDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    },
    handleUpdateEvt (taskId,vin) {
      this.$router.push({path:"/statistics/monitorList","query":{
         vin: vin,
         taskId: taskId
       }})
    }
  }
}
</script>
